<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      v-show="showSearch"
      label-width="80px"
    >
      <el-form-item label="机房名称" prop="machineRoomName">
        <el-input
          v-model="queryParams.machineRoomName"
          placeholder="请输入机房名称"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="机房编号" prop="machineRoomNum">
        <el-input
          v-model="queryParams.machineRoomNum"
          placeholder="请输入机房编号"
          clearable
          size="small"
          @keyup.enter.native="handleQuery"
        />
      </el-form-item>
      <el-form-item label="机房类型" prop="machineRoomType">
        <el-select
          v-model="queryParams.machineRoomType"
          placeholder="请选择机房类型"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in machineRoomTypeOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="所属站点" prop="station">
        <el-select
          v-model="queryParams.station"
          placeholder="请选择所属站点"
          clearable
          filterable
          size="small"
        >
          <el-option
            v-for="dict in stationOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="small"
          @click="handleQuery"
        >
          搜索
        </el-button>
        <!-- <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> -->
      </el-form-item>
    </el-form>

    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="handleAdd"
          v-hasPermi="['system:room:add']"
        >
          新增
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="danger"
          plain
          icon="el-icon-delete"
          size="mini"
          :disabled="multiple"
          @click="handleDelete"
          v-hasPermi="['system:room:remove']"
        >删除</el-button>
      </el-col> -->
       <el-col :span="1.5">
        <el-button
          type="info"
          plain
          icon="el-icon-upload2"
          size="mini"
          @click="handleImport"
          v-hasPermi="['system:room:import']"
        >
          导入
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="warning"
          plain
          icon="el-icon-download"
          size="mini"
          @click="handleExport"
          v-hasPermi="['system:room:export']"
        >
          导出
        </el-button>
      </el-col>
      <right-toolbar
        :showSearch.sync="showSearch"
        @queryTable="getList"
      ></right-toolbar>
    </el-row>
    <el-row :gutter="20" class="mb10">
      <el-col>
        <div class="colStyle">
          <div class="resNum">查询结果：({{ total }}条)</div>
          <div
            v-for="(item, index) in searchFormOptions"
            :key="index"
            class="searchBox"
          >
            <div class="text">
              {{ item.tableName }}：{{ item.conditionName }}{{ item.textVal }}
            </div>
            <div class="icon" @click="removeSearch(index)">
              <i class="el-icon-error"></i>
            </div>
          </div>
          <el-button
            type="warning"
            round
            size="mini"
            class="ml10 h28"
            @click="cleanAllSearch"
          >
            清除条件
          </el-button>
          <el-button
            type="primary"
            round
            size="mini"
            class="h28"
            icon="el-icon-plus"
            @click="openAddModel"
          >
            追加条件
          </el-button>
        </div>
      </el-col>
    </el-row>
    <el-row :gutter="10" class="mb10 mt20" v-if="addShow">
      <el-col :span="4">
        <el-select
        v-model="searchOptions.fieldName"
          placeholder="请选择追加字段"
          clearable
          size="small"
          @change="changeCondition"
        >
          <el-option
            v-for="dict in fieldNameOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName">
        <el-select
          v-model="searchOptions.condition"
          placeholder="请选择条件"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in conditionOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName && searchOptions.type=='string'">
        <el-input
          v-model="searchOptions.val"
          placeholder="请输入条件的值"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName && searchOptions.type=='num'">
        <el-input
          v-model="searchOptions.val"
          type='tel' pattern='\d*'
          onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
          placeholder="请输入条件的值"
          clearable
          size="small"
        />
      </el-col>
      <el-col :span="4" v-if="searchOptions.fieldName && searchOptions.type=='select'">
        <el-select
          v-model="searchOptions.val"
          placeholder="请选择条件的值"
          clearable
          size="small"
        >
          <el-option
            v-for="dict in selectValueOptions"
            :key="dict.dictValue"
            :label="dict.dictLabel"
            :value="dict.dictValue"
          />
        </el-select>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="primary"
          size="small"
          icon="el-icon-plus"
          @click="addSearch"
        >
          追加
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button type="warning" size="small" @click="closeAddModel">
          取消
        </el-button>
      </el-col>
    </el-row>
    <el-table v-loading="loading" :data="roomList" @row-click="toClick" @sort-change="tableSortChg">
      <el-table-column label="#" align="center" prop="id" width="55">
        <template slot-scope="scope">
          <span>
            {{
              (queryParams.pageNum - 1) * queryParams.pageSize +
              (scope.$index + 1)
            }}
          </span>
        </template>
      </el-table-column>
      <el-table-column label="机房名称" align="center" prop="machineRoomName" sortable="custom">
        <template slot-scope="scope">
          <el-dropdown trigger="click" @command="handleCommand">
            <span class="el-dropdown-link font-blue" @click.stop="stopC($event)">
              {{scope.row.machineRoomName}}<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item disabled v-if="!scope.row.smachineCabinets.length">暂无数据</el-dropdown-item>
              <el-dropdown-item v-for="dropItem,index in scope.row.smachineCabinets" :key="index" :command="dropItem">{{dropItem.machineCabinetName}}</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <el-table-column label="机房编号" align="center" prop="machineRoomNum" sortable="custom"/>
      <el-table-column
        label="机房类型"
        align="center"
        :formatter="machineRoomTypeMatter"
        prop="machineRoomType"
      />
      <el-table-column
        label="所属站点"
        align="center"
        prop="station"
      >
      <template slot-scope="scope">
        <span class="showDetailCell font-blue" @click.stop="loogStation(scope.row)">
          {{stationMatter(scope.row)}}
        </span>
        </template>
      </el-table-column>
      <el-table-column
        label="操作"
        align="center"
        class-name="small-padding fixed-width"
      >
        <template>
          <el-button
            size="mini"
            type="text"
            icon="el-icon-edit"
            v-hasPermi="['system:room:edit']"
          >
            修改
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
    <el-dialog title="查看站点" v-if="lookOpen" :visible.sync="lookOpen" :width="getDialogWidth()" append-to-body>
      <stationDetail :id="selectStationId"></stationDetail>
    </el-dialog>
    <!-- 添加或修改机房对话框 -->
    <el-dialog :title="title" :visible.sync="open" :width="getDialogWidth()" append-to-body @closed="clearFiles">
      <el-form ref="form" :model="form" :rules="rules" label-width="100px">
        <el-row>
          <el-col :span="5">
            <div style="max-height:45vh;overflow-y:auto;border-right:#DCDFE6 solid 1px;">
              <el-upload 
              :headers="upload.headers"
              :file-list="fileList"
              :action="field101Action"
              :before-upload="imgUpload"
              :on-success="imgFileSuccess"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              list-type="picture-card"
              accept="image/*">
              <i class="el-icon-plus"></i>
            </el-upload>
            </div>
          </el-col>
          <el-col :span="19">
              <el-col :span="12">
                <el-form-item label="机房名称" prop="machineRoomName">
                  <el-input
                    v-model="form.machineRoomName"
                    placeholder="请输入机房名称"
                    suffix-icon="xxx"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="所属站点" prop="station">
                  <el-select
                    v-model="form.station"
                    placeholder="请选择所属站点"
                    filterable
                    clearable
                  >
                    <el-option
                      v-for="dict in stationOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机房类型" prop="machineRoomType">
                  <el-select
                    v-model="form.machineRoomType"
                    placeholder="请选择机房类型"
                    clearable
                  >
                    <el-option
                      v-for="dict in machineRoomTypeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="机房编号" prop="machineRoomNum">
                  <el-input
                    v-model="form.machineRoomNum"
                    placeholder="请输入机房编号"
                    suffix-icon="xxx"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="机房位置" prop="machineRoomPlace">
                  <el-input
                    v-model="form.machineRoomPlace"
                    placeholder="请输入机房位置"
                    suffix-icon="xxx"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="走线方式" prop="takeUpMode">
                  <el-select
                    v-model="form.takeUpMode"
                    placeholder="请选择走线方式"
                    clearable
                  >
                    <el-option
                      v-for="dict in takeUpModeOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="最大屏位数" prop="maxScreenNumber">
                  <el-input
                    v-model="form.maxScreenNumber"
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                    placeholder="请输入最大屏位数"
                    suffix-icon="xxx"
                  />
                </el-form-item>
              </el-col>

              <el-col :span="12">
                <el-form-item label="已用屏位数" prop="useScreenNumber">
                  <el-input
                    onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                    v-model="form.useScreenNumber"
                    placeholder="请输入已用屏位数"
                    suffix-icon="xxx"
                  />
                </el-form-item>
              </el-col>
              <el-col :span="12">
                <el-form-item label="是否监控" prop="monitoringFlag">
                  <el-select
                    v-model="form.monitoringFlag"
                    placeholder="请选择是否监控"
                    clearable
                  >
                    <el-option
                      v-for="dict in monitoringFlagOptions"
                      :key="dict.dictValue"
                      :label="dict.dictLabel"
                      :value="dict.dictValue"
                    />
                  </el-select>
                </el-form-item>
              </el-col>
              
              <el-col :span="24">
                <el-col :span="12">
                  <el-form-item label="填报部门" prop="fillDept">
                    <el-input
                      v-model="form.fillDept"
                      placeholder="请输入填报部门"
                      suffix-icon="xxx"
                      disabled
                    />
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label="填报人" prop="fillBy">
                    <el-input
                      v-model="form.fillBy"
                      placeholder="请输入填报人"
                      suffix-icon="xxx"
                      disabled
                    />
                  </el-form-item>
                </el-col>
              </el-col>
              
          </el-col>
        <!-- <el-row>
          <el-col :span="12">
            <el-form-item label="机房名称" prop="machineRoomName">
              <el-input
                v-model="form.machineRoomName"
                placeholder="请输入机房名称"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="所属站点" prop="station">
              <el-select
                v-model="form.station"
                placeholder="请选择所属站点"
                clearable
              >
                <el-option
                  v-for="dict in stationOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机房类型" prop="machineRoomType">
              <el-select
                v-model="form.machineRoomType"
                placeholder="请选择机房类型"
                clearable
              >
                <el-option
                  v-for="dict in machineRoomTypeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="机房编号" prop="machineRoomNum">
              <el-input
                v-model="form.machineRoomNum"
                placeholder="请输入机房编号"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="机房位置" prop="machineRoomPlace">
              <el-input
                v-model="form.machineRoomPlace"
                placeholder="请输入机房位置"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="走线方式" prop="takeUpMode">
              <el-select
                v-model="form.takeUpMode"
                placeholder="请选择走线方式"
                clearable
              >
                <el-option
                  v-for="dict in takeUpModeOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="最大屏位数" prop="maxScreenNumber">
              <el-input
                v-model="form.maxScreenNumber"
                onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                placeholder="请输入最大屏位数"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>

          <el-col :span="12">
            <el-form-item label="已用屏位数" prop="useScreenNumber">
              <el-input
                onkeyup="this.value = this.value.replace(/[^\d.]/g,'');"
                v-model="form.useScreenNumber"
                placeholder="请输入已用屏位数"
                suffix-icon="xxx"
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="是否监控" prop="monitoringFlag">
              <el-select
                v-model="form.monitoringFlag"
                placeholder="请选择是否监控"
                clearable
              >
                <el-option
                  v-for="dict in monitoringFlagOptions"
                  :key="dict.dictValue"
                  :label="dict.dictLabel"
                  :value="dict.dictValue"
                />
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="填报部门" prop="fillDept">
              <el-input
                v-model="form.fillDept"
                placeholder="请输入填报部门"
                suffix-icon="xxx"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item label="填报人" prop="fillBy">
              <el-input
                v-model="form.fillBy"
                placeholder="请输入填报人"
                suffix-icon="xxx"
                disabled
              />
            </el-form-item>
          </el-col>
        </el-row> -->
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button
          type="danger"
          plain
          @click="handleDelete"
          v-if="title == '修改机房'"
          v-hasPermi="['system:room:remove']"
        >
          删 除
        </el-button>
        <el-button @click="cancel">取 消</el-button>
        <el-button type="primary" @click="submitForm" style="width: 120px;">
          确 定
        </el-button>
      </div>
    </el-dialog>
    <!-- 预览 -->
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
    <!-- 机房导入对话框 -->
    <el-dialog
      :title="upload.title"
      :visible.sync="upload.open"
      width="400px"
      append-to-body
    >
      <el-upload
        ref="upload"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">
          将文件拖到此处，或
          <em>点击上传</em>
        </div>
        <!--        <div class="el-upload__tip" slot="tip">-->
        <!--          <el-checkbox v-model="upload.updateSupport" />是否更新已经存在的设备属性数据-->
        <!--          <el-link type="info" style="font-size:12px" @click="importTemplate">下载模板</el-link>-->
        <!--        </div>-->
        <div class="el-upload__tip" style="color: red;" slot="tip">
          提示：仅允许导入“xls”或“xlsx”格式文件！
          <el-link type="info" style="font-size: 12px;" @click="importTemplate">
            下载模板
          </el-link>
        </div>
      </el-upload>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitFileForm">确 定</el-button>
        <el-button @click="upload.open = false">取 消</el-button>
      </div>
    </el-dialog>
  </div>
</template>


<script>
import stationDetail from '@/views/dialogDetail/station.vue'
import { getInfo } from '@/api/login'
import {
  listRoom,
  getRoom,
  delRoom,
  addRoom,
  updateRoom,
  exportRoom,
  importTemplate,
} from '@/api/machineroom/machineroom'
import { stationDictList } from '@/api/station/station'
import { getToken } from '@/utils/auth'
import { getCondition } from '@/api/login'


export default {
  name: 'MachineRoom',
  components: { stationDetail },
  data() {
    return {
      selectStationId:null,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 机房表格数据
      roomList: [],
      // 弹出层标题
      title: '',
      // 是否显示弹出层
      lookOpen:false,
      open: false,
      //追加条件的select参数
      fieldNameOptions: [],
      conditionOptions: [],
      selectValueOptions:[],
      //机房类型下拉选
      machineRoomTypeOptions: [],
      //站点下拉选
      stationOptions: [],
      //走线方式下拉选
      takeUpModeOptions: [],
      //是否监控下拉选
      monitoringFlagOptions: [],
      //end
      addShow: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        orderby: null,
        machineRoomName: null,
        station: null,
        machineRoomType: null,
        machineRoomNum: null
      },
      searchOptions: {
        fieldName: '',
        condition: '',
        val: '',
      },
      searchFormOptions: [],
      // 文件上传
      field101Action: process.env.VUE_APP_BASE_API + '/common/upload',
      fileList: [],
      dialogImageUrl: '',
      dialogVisible: false,
      // 表单参数
      form: {},
      // 表单校验
      rules: {
        machineRoomName: [
          { required: true, message: '请输入机房名称', trigger: 'change' },
        ],
        station: [
          { required: true, message: '请输入所属站点', trigger: 'change' },
        ],
        machineRoomType: [
          { required: true, message: '请输入机房类型', trigger: 'change' },
        ],
        machineRoomNum: [
          { required: true, message: '请输入机房编号', trigger: 'change' },
        ],
        machineRoomPlace: [
          { required: true, message: '请输入机房位置', trigger: 'change' },
        ],
        takeUpMode: [
          { required: true, message: '请输入走线方式', trigger: 'change' },
        ],
        maxScreenNumber: [
          { required: true, message: '请输入最大屏位数', trigger: 'change' },
        ],
        useScreenNumber: [
          { required: true, message: '请输入已用屏位数', trigger: 'change' },
        ],
        monitoringFlag: [
          { required: true, message: '请输入是否监控 ', trigger: 'change' },
        ],
      },
      // 机房导入参数
      upload: {
        // 是否显示弹出层（机房数据导入）
        open: false,
        // 弹出层标题（机房数据导入）
        title: '',
        // 是否禁用上传
        isUploading: false,
        // 是否更新已经存在的用户数据
        updateSupport: 0,
        // 设置上传的请求头部
        headers: { Authorization: 'Bearer ' + getToken() },
        // 上传的地址
        url: process.env.VUE_APP_BASE_API + '/machineRoom/importData',
      },
    }
  },
  mounted(){
    if (this.$route.query.roomName){
      this.queryParams.station = decodeURIComponent(JSON.parse(JSON.stringify(this.$route.query)).station)
      this.queryParams.machineRoomName = decodeURIComponent(JSON.parse(JSON.stringify(this.$route.query)).roomName)
      setTimeout(() => {
        this.handleQuery()
      }, 500);
      console.log('111',this.queryParams.station,this.queryParams.machineRoomName);
    }
    else{
      this.getList()
    }
  },
  created() {
    getCondition('SMachineRoom').then(res=>{
      this.fieldNameOptions = res.data
    })
    // this.getDicts('operation').then((response) => {
    //   this.conditionOptions = response.data
    // })
    // this.getDicts('machine_room').then((response) => {
    //   this.fieldNameOptions = response.data
    // })
    this.getDicts('machine_room_type').then((response) => {
      this.machineRoomTypeOptions = response.data
    })
    this.getDicts('take_up_mode').then((response) => {
      this.takeUpModeOptions = response.data
    })
    this.getDicts('monitoring_flag').then((response) => {
      this.monitoringFlagOptions = response.data
    })
    stationDictList().then((res) => {
      this.stationOptions = res.data
    })
  },
  activated() {
    if (this.$route.query.roomName){
      this.queryParams.machineRoomName = decodeURIComponent(JSON.parse(JSON.stringify(this.$route.query)).roomName)
      this.queryParams.station = decodeURIComponent(JSON.parse(JSON.stringify(this.$route.query)).station)
      this.handleQuery()
    }
    else{
      this.getList()
    }
    getCondition('SMachineRoom').then(res=>{
      this.fieldNameOptions = res.data
    })
    // this.getDicts('operation').then((response) => {
    //   this.conditionOptions = response.data
    // })
    // this.getDicts('machine_room').then((response) => {
    //   this.fieldNameOptions = response.data
    // })
    this.getDicts('machine_room_type').then((response) => {
      this.machineRoomTypeOptions = response.data
    })
    this.getDicts('take_up_mode').then((response) => {
      this.takeUpModeOptions = response.data
    })
    this.getDicts('monitoring_flag').then((response) => {
      this.monitoringFlagOptions = response.data
    })
    stationDictList().then((res) => {
      this.stationOptions = res.data
    })
  },
  methods: {
     tableSortChg(params) {
      this.queryParams.orderby = params.prop + ' ' + params.order.replace('ending', '')
      this.getList()
    }, 
    changeCondition(e){
      let arr = this.fieldNameOptions.filter(res=>{return res.dictValue == e})
        this.searchOptions.condition = '';
        this.searchOptions.val = '';
        this.searchOptions.fieldName = arr[0].dictValue;
        this.searchOptions.type = arr[0].type
        this.conditionOptions = arr[0].conditon
        this.selectValueOptions = arr[0].selectDict
    },
    loogStation(row){
      this.selectStationId = row.station;
      this.lookOpen = true
    },
    handleCommand(item){
      this.$router.push({ path: `/cabinet?cabinetName=${encodeURIComponent(item.machineCabinetName) }&machineRoom=${item.machineRoom}`})
    },
    stopC(e){
      if(e && e.stopPropagation){
          e.stopPropagation;
      }else{
          window.event.cancelBubble;
      }
    },
    toClick(row){
      this.handleUpdate(row)
    },
    stationMatter(row, column) {
      return this.selectDictLabel(this.stationOptions, row.station)
    },
    machineRoomTypeMatter(row, column) {
      return this.selectDictLabel(
        this.machineRoomTypeOptions,
        row.machineRoomType,
      )
    },
    setFormUserInfo() {
      getInfo().then((res) => {
        console.log(res)
        this.$set(this.form, 'fillBy', res.user.userName)
        this.$set(this.form, 'fillById', res.user.userId)
        this.$set(this.form, 'fillDept', res.user.dept.deptName)
        this.$set(this.form, 'fillDeptId', res.user.dept.deptId)
      })
    },
    //追加条件操作
    openAddModel() {
      this.addShow = true
    },
    closeAddModel() {
      this.addShow = false
      this.searchOptions.fieldName = ''
      this.searchOptions.condition = ''
      this.searchOptions.val = ''
    },
    removeSearch(i) {
      if (this.queryParams[this.searchFormOptions[i].fieldName]) {
        this.queryParams[this.searchFormOptions[i].fieldName] = ''
      }
      this.searchFormOptions.splice(i, 1)
      this.getList()
    },
    addSearch() {
      if (
        !this.searchOptions.fieldName ||
        !this.searchOptions.condition ||
        !this.searchOptions.val
      ) {
        this.msgError('请填写完整搜索条件')
        return
      }
      let obj = { ...this.searchOptions }
      obj.tableName = this.selectDictLabel(this.fieldNameOptions, obj.fieldName)
      obj.conditionName = this.selectDictLabel(
        this.conditionOptions,
        obj.condition,
      )
      if(this.searchOptions.type=='select'){
        obj.textVal = this.selectDictLabel(this.selectValueOptions, obj.val)
      }else{
        obj.textVal = obj.val
      }
      this.searchFormOptions.push(obj)
      this.closeAddModel()
      this.getList()
    },
    cleanAllSearch() {
      this.searchFormOptions = []
      this.resetQuery()
    },
    //*******
    /** 查询机房列表 */
    getList() {
      this.loading = true
      let form = {
        pageNum: this.queryParams.pageNum,
        pageSize: this.queryParams.pageSize,
        orderby: this.queryParams.orderby,
        queryData: [],
      }
      for (let i in this.searchFormOptions) {
        form.queryData.push({
          fieldName: this.searchFormOptions[i].fieldName
            .replace(/([A-Z])/g, '_$1')
            .toLowerCase(),
          condition: this.searchFormOptions[i].condition,
          val: this.searchFormOptions[i].val || '',
        })
      }
      listRoom(form).then((response) => {
        this.roomList = response.rows
        this.total = response.total
        this.loading = false
      })
    },
    // 取消按钮
    cancel() {
      this.open = false
      this.reset()
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        machineRoomName: null,
        station: null,
        machineRoomType: null,
        machineRoomNum: null,
      }
      this.resetForm('form')
    },
    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1
      this.searchFormOptions = this.searchFormOptions.filter((res) => {
        return (
          res.fieldName != 'machineRoomName' &&
          res.fieldName != 'station' &&
          res.fieldName != 'machineRoomType' &&
          res.fieldName != 'machineRoomNum'
        )
      })
      if (this.queryParams.machineRoomName) {
        this.searchFormOptions.push({
          fieldName: 'machineRoomName',
          condition: 'like',
          val: this.queryParams.machineRoomName,
          tableName: '机房名称',
          conditionName: '',
          textVal: this.queryParams.machineRoomName,
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'machineRoomName'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'machineRoomName') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.station) {
        this.searchFormOptions.push({
          fieldName: 'station',
          condition: 'eq',
          val: this.queryParams.station,
          tableName: '所属站点',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.stationOptions,
            this.queryParams.station,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'station'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'station') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.machineRoomType) {
        this.searchFormOptions.push({
          fieldName: 'machineRoomType',
          condition: 'eq',
          val: this.queryParams.machineRoomType,
          tableName: '机房类型',
          conditionName: '',
          textVal: this.selectDictLabel(
            this.machineRoomTypeOptions,
            this.queryParams.machineRoomType,
          ),
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'machineRoomType'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'machineRoomType') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      if (this.queryParams.machineRoomNum) {
        this.searchFormOptions.push({
          fieldName: 'machineRoomNum',
          condition: 'like',
          val: this.queryParams.machineRoomNum,
          tableName: '机房编号',
          conditionName: '',
          textVal: this.queryParams.machineRoomNum,
        })
      } else {
        let filterList = this.searchFormOptions.filter((res) => {
          return res.fieldName == 'machineRoomNum'
        })
        if (filterList && filterList.length) {
          for (let i = 0; i < this.searchFormOptions.length; i++) {
            if (this.searchFormOptions[i].fieldName == 'machineRoomNum') {
              this.searchFormOptions.splice(i, 1)
            }
          }
        }
      }
      this.getList()
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm('queryForm')
      this.handleQuery()
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map((item) => item.id)
      this.single = selection.length !== 1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset()
      this.setFormUserInfo()
      this.fileList = []
      this.open = true
      this.title = '添加机房'
    },
    clearFiles(){
      this.fileList = []
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset()
      const id = row.id || this.ids
      getRoom(id).then((response) => {
        this.form = response.data
        this.open = true
        this.title = '修改机房'
        if(this.form.fileList){
            this.fileList = JSON.parse(this.form.fileList)
          }else{
            this.fileList = []
          }
      })
    },
    /** 提交按钮 */
    submitForm() {
      this.form.fileList = JSON.stringify(this.fileList)
      this.$refs['form'].validate((valid) => {
        if (valid) {
          if (this.form.id != null) {
            updateRoom(this.form).then((response) => {
              this.msgSuccess('修改成功')
              this.open = false
              this.getList()
            })
          } else {
            addRoom(this.form).then((response) => {
              this.msgSuccess('新增成功')
              this.open = false
              this.getList()
            })
          }
        }
      })
    },
    /** 删除按钮操作 */
    handleDelete() {
      const ids = this.form.id
      this.$confirm(
        '是否删除机房名称为"' + this.form.machineRoomName + '"的数据项?',
        '警告',
        {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning',
        },
      )
        .then(function () {
          return delRoom(ids)
        })
        .then(() => {
          this.cancel()
          this.getList()
          this.msgSuccess('删除成功')
        })
    },
    /** 导出按钮操作 */
    handleExport() {
      const queryParams = this.queryParams
      this.$confirm('是否确认导出所有机房数据项?', '警告', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      })
        .then(function () {
          return exportRoom(queryParams)
        })
        .then((response) => {
          this.download(response.msg)
        })
    },
    /** 导入按钮操作 */
    handleImport() {
      this.upload.title = '机房数据导入'
      this.upload.open = true
    },
    /** 下载模板操作 */
    importTemplate() {
      importTemplate().then((response) => {
        this.download(response.msg)
      })
    },
    // 文件上传中处理
    handleFileUploadProgress(event, file, fileList) {
      this.upload.isUploading = true
    },
    // 文件上传成功处理
    handleFileSuccess(response, file, fileList) {
      this.upload.open = false
      this.upload.isUploading = false
      this.$refs.upload.clearFiles()
      this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
      this.getList()
    },
     // 文件上传
    imgUpload(file) {
      let isRightSize = file.size / 1024 / 1024 < 5
      if (!isRightSize) {
        this.$message.error('文件大小超过 5MB')
      }
      return isRightSize
    },
    // 提交上传文件
    submitFileForm() {
      this.$refs.upload.submit()
    },
      imgFileSuccess(e){
      this.fileList.push({name: '', url: process.env.VUE_APP_BASE_API + e.fileName})
    },
    handleRemove(file, fileList) {
      this.fileList = fileList
    },
    handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
    }
  },
}
</script>


<style lang="scss" scoped>
.colStyle {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
}
.searchBox {
  min-width: 50px;
  height: 28px;
  margin-top: 6px;
  border-radius: 14px;
  display: flex;
  font-size: 13px;
  background: #d7d7d7;
  line-height: 28px;
  margin-left: 6px;
  .text {
    padding-left: 14px;
    padding-right: 7px;
  }
  .icon {
    padding-right: 5px;
    display: flex;
    align-items: center;
    i {
      font-size: 20px;
      color: red;
    }
  }
}
.resNum {
  margin-top: 2px;
  font-size: 14px;
}
</style>
